<template>
    <div class="photoinfo-container">
        <h3>{{info.title}}</h3>
        <p class="subtitle">
            <span>发表时间:{{info.add_time | dataFormat}}</span>
            <span>点击次数：{{info.click}}次</span>
        </p>
        <hr>
<!-- 缩略图位置 -->
         <vue-preview :slides="slide1" @close="handleClose"></vue-preview>


        <div class="content">
            {{info.content}}
        </div>

        <com-box :id="1675"></com-box>
    </div>
</template>
<style lang="scss" >
.photoinfo-container{
    padding:3px;
    h3{
        color:#26A2ff;
        font-size:16px;
        text-align:center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }
    .content{
        font-size: 12px;
        line-height: 28px
    }
    .my-gallery{
        display: flex;
        width: 100%;
        height: 130px;
        figure{
            margin:10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            height: 100px;
            a{
                display: block;
                img{
                    width: 100px;
                    height:100px
                }
            }
            
        }
        
    }
}
</style>
<script>
import { Toast } from "mint-ui";


// 导入评论子组件；
import comment from "../subcomponents/comment.vue";
export default {
    data(){
        return {
            id:this.$route.params.id,
            info:{},
            slide1: [
                {
                    src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                    msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                    alt: 'picture1',
                    title: 'Image Caption 1',
                    w: 600,
                    h: 400
                },
                {
                    src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                    msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                    alt: 'picture2',
                    title: 'Image Caption 2',
                    w: 1200,
                    h: 900
                }
            ]
        }
    },
    methods:{
        
        getInfo(){
            var that = this;
            that.$http.get('../../data/photoInfo.json').then(res=>{
                console.log(res.body)
                console.log(that.id)
                if(res.body.code == 200){
                    let list = res.body.list;
                    for(var i=0;i<list.length;i++){
                        if(list[i].id == that.id){
                            that.info = list[i]
                            break
                        }
                        
                    }
                }else{
                    Toast('哦~报错了！')
                }
                
            })    
        },
        handleClose () {
            console.log('close event')
        }
    },
    created(){
        this.getInfo()
    },
    components:{
        // 注册评论子组件
        "com-box":comment
    }
    
}
</script>